<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
      .mui-badge {
        font-size: 14px;
      }
      .logout {
        margin-top: 10px;
      }
      .logoutStyle {
        text-align: center;
        color: #fff;
        font-weight: normal;
        font-size: 14px;
        background-color: #5571be;
      }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main">
          <div class="profile_box" id="profile">
          </div
          <div class="profile_box">
            <ul class="mui-table-view logout">
              <li class="mui-table-view-cell logoutStyle" id="logouts">Logout
              </li>
            </ul>
            </div
        </div>
    </div>
</body>
<script id="template" type="text/x-dot-template">
{{ for (var key in it) { }}
  <ul class="mui-table-view" id="">
    <li class="mui-table-view-cell">Login Name
        <span class="mui-badge">{{=it[key].loginName}}</span>
    </li>
    <li class="mui-table-view-cell">Name
        <span class="mui-badge">{{=it[key].name}}</span>
    </li>
    <li class="mui-table-view-cell">Organization
        <span class="mui-badge">{{=it[key].organization}}</span>
    </li>
    <li class="mui-table-view-cell">Role
        <span class="mui-badge">{{=it[key].role}}</span>
    </li>
  </ul>
{{ } }}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<!-- <script src="../script/mui.min.js" type="text/javascript"></script> -->
<script src="../script/ajax.js" type="text/javascript"></script>
<script type="text/javascript">
    apiready = function(){
      let userid =  $api.getStorage('query');
      var profile = $api.byId('profile');
      var template = $api.byId('template');
      var interText = doT.template(template.innerHTML);
      getUser(userid.id, interText);
      let logouts = $api.byId('logouts');
      logouts.addEventListener('click', function() {
        api.confirm({
          title: 'Prompt',
          msg: 'Decide to quit?',
          buttons: ['ok', 'cancel']
      }, function(ret, err) {
          var index = ret.buttonIndex;
          if (index === 1) {
            Logout();
          }
      });
      });
    }
    // apiready();
</script>
</html>
